<template>
  <div>
    <div class="header">
      <h2>物联网金融系统</h2>
      <h2>
      <span style="color: red;">{{ user.UT_Name }}</span>
      <span style="color: red;">{{ user.UL_Name }}</span>
      </h2>    
      <input style="float: right;" type="button" value="退出登录" @click="logout" class="btn btn-warning">
    </div>
    <div class="main">
      <div class="left">
        <ul>
          <li>项目管理
            <ol>
              <li>投资管理
              <ol> 
                <li @click="adminAddInvest">增加投资</li>
                <li @click="adminInvestList">投资列表</li>
              </ol>
            </li>
            <li>理财管理
              <ol>
                <li @click="adminAddFinace">增加理财</li>
                <li @click="adminFinanceList">理财列表</li>
              </ol>
            </li>
            <li>借款管理
              <ol>
                <li @click="adminAddBorrow">增加借款</li>
                <li @click="adminBorrowList">增加列表</li>
              </ol>
            </li>
            </ol>           
          </li>
          <li>投资管理
            <ol>
              <li>投资项目列表
                <ol>
                  <li @click="userInvestList">用户投资项目列表</li>
                  <li @click="adminInvestItemList">管理员投资项目列表</li>
                </ol>
              </li>
              <li>理财项目列表
              <ol>
                <li @click="userFinanceList">用户理财项目列表</li>
                <li @click="adminFinanceItemList">管理员理财项目列表</li>
              </ol>
              </li>
              <li>借款项目列表
                <ol>
                  <li @click="userBorrwoList">用户借款项目列表</li>
                  <li @click="adminBorrowItemList">管理员借款项目列表</li>
                </ol>
              </li>
            </ol>
          </li>
          <li>资产管理
            <ol>
              <li>投资管理
                <ol>
                  <li @click="userInvestRedeemList">用户赎回列表</li>
                  <li @click="adminInvestRedeemList">管理员赎回列表</li>
                </ol>
              </li>
              <li>理财赎回
                <ol>
                  <li @click="userFinanceRedeemList">用户赎回列表</li>
                  <li @click="adminFinanceRedeemList">管理员赎回列表</li>
                </ol>
              </li>
              <li>借款还款
                <ol>
                  <li @click="userBorrowRedeemList">用户还款列表</li>
                  <li @click="adminBorrowRedeemList">管理员管理还款列表</li>
                </ol>
              </li>
            </ol>
          </li>
        </ul>
      </div>
      <div class="right">
        <!--占位-->
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {reactive,toRefs,onMounted} from 'vue'
import {useRouter,RouterView} from 'vue-router'

import {useUserStore} from '../../store/user'

let userStore = useUserStore()
let router = useRouter()

let data:any =reactive({
  user:{}
})

let {user} = toRefs(data)

onMounted(()=>{
  getUserInfo()
})

//退出登录
const logout = ()=>{
  userStore.userInfo={};
  router.push('/login')
}

//获取用户信息
const getUserInfo = ()=>{
  axios({
    url:'/api/User/GetUserInfo',
    method:'get',
    params:{
      U_Id:userStore.userInfo.U_Id
    }
  }).then(res=>{
    console.log(res);
    user.value=res.data.data[0]
  }).catch(err=>{
    console.log(err);  
  })
}

//用户赎回列表
const userFinanceRedeemList =()=>{
  router.push('/main/userFinanceRedeemList')
}

//管理员赎回列表
const adminFinanceRedeemList =()=>{
  router.push('/main/adminFinanceRedeemList')
}
//用户理财项目列表
const userFinanceList =()=>{
  router.push('/main/userFinanceList')
}

//管理员理财项目列表
const adminFinanceItemList =()=>{
  router.push('/main/adminFinanceItemList')
}

//资产管理 --用户还款
const userBorrowRedeemList=()=>{
  router.push('/main/userBorrowRedeemList')
}

//资产管理 --管理员还款明细
const adminBorrowRedeemList=()=>{
  router.push('/main/adminBorrowRedeemList')
}


//投资管理 ---用户借款
const userBorrwoList =()=>{
  router.push('/main/userBorrwoList')
}

//投资管理 ---管理员借款
const adminBorrowItemList =()=>{
  router.push('/main/adminBorrowItemList')
}


//增加借款
const adminAddBorrow =()=>{
  router.push('/main/adminAddBorrow')
}

//借款列表
const adminBorrowList =()=>{
  router.push('/main/borrowTest')
}

//增加理财
const adminAddFinace =()=>{
  router.push('/main/adminAddFinace')
}

//理财列表
const adminFinanceList =()=>{
  router.push('/main/adminFinanceList')
}

//用户--投资赎回列表
const userInvestRedeemList =()=>{
  router.push('/main/userInvestRedeemList')
}

//管理员--投资赎回列表
const adminInvestRedeemList =()=>{
  router.push('/main/adminInvestRedeemList')
}

//管理员投资项目列表
const adminInvestItemList =()=>{
  router.push('/main/adminInvestItemList')
}

//用户投资项目列表
const userInvestList =()=>{
  router.push('/main/userInvestList')
}

//函数
//管理员添加投资
const adminAddInvest = () => {
  router.push('/main/adminAddInvest')
}

//管理员投资列表
const adminInvestList = () => {
  router.push('/main/adminInvestList')
}

</script>

<style scoped>

.header{
  height: 60px;
  background-color: rgb(35, 210, 210);
  display: flex;
  justify-content: space-between;
}

.main{
  display: flex;
}

.left{
  width: 280px;
  background-color: rgb(34, 191, 208) ;
}

.right{
  flex: 1;
  width: 500px;
  background-color: deepskyblue;
}

h2 span{
  font-size: 16px;
  margin-right: 10px;
}

</style>